// 导入：类型、接口、模块、组件、样式
import { Component } from "react";

import Swiper from "swiper/js/swiper.js"; // 引入js
import "swiper/css/swiper.min.css"; // 引入样式

import "./styled.scss";

class Index extends Component {
  componentDidMount() {
    // 配置swiper播放 配置项都写这里面
    new Swiper(".swiper-container", {
      autoplay: true,
      loop: true,
    });
  }

  render() {
    return (
      <div className="swiper-container qfSwiper">
        <div className="swiper-wrapper" style={{ color: "#fff" }}>
          <div className="swiper-slide swiper-slide1">
            <img
              src="https://static.maizuo.com/pc/v5/usr/movie/f57040d1983ab2923e53aedb36a00cd4.jpg?x-oss-process=image/quality,Q_70"
              alt=""
            />
          </div>
          <div className="swiper-slide swiper-slide2">
            <img
              src="https://static.maizuo.com/pc/v5/usr/movie/ff0c6346f478b8cec25ee1ba25789087.jpg?x-oss-process=image/quality,Q_70"
              alt=""
            />
          </div>
          <div className="swiper-slide swiper-slide3">
            <img
              src="https://static.maizuo.com/pc/v5/usr/movie/1a1374d8f4add341468aa6a5ca3aa9f4.jpg?x-oss-process=image/quality,Q_70"
              alt=""
            />
          </div>
        </div>
      </div>
    );
  }
}
export default Index;
